Adwaita: better colorswatches for the dark theme

...which reveals a "nice" border/fill border radius issue.

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index e9b4036309636f14afb9248cfa634ed8819bfa6d..586e280027e96d250f917ef037a4590248387d71 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -525,8 +525,15 @@ GtkLabel {
   }
 }
 
-GtkColorButton.button { padding: 4px; } // Uniform padding on the
-                                        // GtkColorButton.button
+GtkColorButton.button { 
+  padding: 4px; // Uniform padding on the GtkColorButton
+  GtkColorSwatch {
+    border-radius: 1.5px;
+    box-shadow: inset 0 1px 1px transparentize(black, 0.8),
+                $widget_edge;
+    &:backdrop { box-shadow: none; }
+  }
+}
 
 /*********
  * Links *
@@ -2295,8 +2302,16 @@ GtkInfoBar {
 
 GtkColorSwatch {
 
-  border: 1px solid transparentize(black,0.7);
-  box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+  border-width: 1px;
+  border-style: solid;
+  @if $variant == light {
+    border-color: transparentize(black,0.7);
+    box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+  }
+  @else {
+    border-color: $borders_color;
+    box-shadow: inset 0 1px 1px transparentize(black, 0.6);
+  }
 
   &.color-light {
     &:hover {
@@ -2315,9 +2330,16 @@ GtkColorSwatch {
     }
   }
 
-  &:hover { border-color: transparentize(black, 0.5); }
+  &:hover {
+   border-color: if($variant=='light', transparentize(black, 0.5),
+                                       $backdrop_borders_color);
+  }
 
-  &:backdrop { border-color: transparentize(black,0.8); box-shadow: none; }
+  &:backdrop {
+    border-color: if($variant=='light', transparentize(black,0.8),
+                                        $backdrop_borders_color);
+    box-shadow: none;
+  }
 
   &.top {
     border-top-left-radius: 5px;

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index e38d02ae9ae0216477cc6ce0ff21de925ef561d1..af6e850bd0e7bba7bb55f2c9e080f328b517479d 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -634,6 +634,11 @@
 
 GtkColorButton.button {
   padding: 4px; }
+  GtkColorButton.button GtkColorSwatch {
+    border-radius: 1.5px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(238, 238, 236, 0.1); }
+    GtkColorButton.button GtkColorSwatch:backdrop {
+      box-shadow: none; }
 
 /*********
  * Links *
@@ -2860,8 +2865,10 @@ GtkInfoBar {
  * Color Chooser *
  *****************/
 GtkColorSwatch {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+  border-width: 1px;
+  border-style: solid;
+  border-color: #1c1f1f;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
   GtkColorSwatch.color-light:hover {
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
     GtkColorSwatch.color-light:hover:backdrop {
@@ -2871,9 +2878,9 @@ GtkColorSwatch {
     GtkColorSwatch.color-dark:hover:backdrop {
       background-image: none; }
   GtkColorSwatch:hover {
-    border-color: rgba(0, 0, 0, 0.5); }
+    border-color: #1e2222; }
   GtkColorSwatch:backdrop {
-    border-color: rgba(0, 0, 0, 0.2);
+    border-color: #1e2222;
     box-shadow: none; }
   GtkColorSwatch.top {
     border-top-left-radius: 5px;

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index c71989bc0613d93a44740b173120fe60f0e984de..27b902aff59e7893010558f6318c7673faac5081 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -626,6 +626,11 @@
 
 GtkColorButton.button {
   padding: 4px; }
+  GtkColorButton.button GtkColorSwatch {
+    border-radius: 1.5px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px white; }
+    GtkColorButton.button GtkColorSwatch:backdrop {
+      box-shadow: none; }
 
 /*********
  * Links *
@@ -2852,7 +2857,9 @@ GtkInfoBar {
  * Color Chooser *
  *****************/
 GtkColorSwatch {
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
   GtkColorSwatch.color-light:hover {
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }